{% extends 'user.html' %}

{% block left %}
    <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
            <a href="{% url 'user_home' %}">书架</a>

        </li>
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">借阅详情</a>
            <dl class="layui-nav-child">
                <dd class="layui-this"><a href="{% url 'my_borrow_book' %}">我的借书</a></dd>
                <dd><a href="{% url 'show_return_book' %}">我的还书</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">个人中心</a>
            <dl class="layui-nav-child">
                <dd><a href="{% url 'user_detail' %}">账号详情</a></dd>
            </dl>
        </li>
    </ul>
{% endblock %}

{% block body %}
    <span class="layui-breadcrumb">
                <a href="{% url 'user_home' %}">首页</a>
                <a><cite>借阅详情</cite></a>
                <a href="{% url 'my_borrow_book' %}">我的借书</a>
            </span>
    <hr/>
    <table class="layui-table">


        <h1>借阅详情</h1>
        <hr/>
        <tr>
            <th>ISBN</th>
            <th>图书名</th>
            <th>作者</th>
            <th>借书日期</th>
            <th>应还日期</th>
            <th>是否归还</th>
            <th>归还日期</th>
            <th>是否超时</th>
            <th>操作</th>
        </tr>
        {% for obj in borrow_book_list %}
            {% if obj.status == 0 %}
                <tr>
                    <th>{{ obj.bookId.ISBN }}</th>
                    <th>{{ obj.bookId.book_name }}</th>
                    <th>{{ obj.bookId.author }}</th>
                    <th>{{ obj.borrowing_time }}</th>
                    <th>{{ obj.due_date }}</th>
                    {% if obj.status == 1 %}
                        <td>已归还</td>
                    {% else %}
                        <td style="color: red">未归还</td>
                    {% endif %}
                    {% if obj.return_time is none %}
                        <td>未归还</td>
                    {% else %}
                        <td>{{ obj.return_time }}</td>
                    {% endif %}

                    {% if obj.flag == 2 %}
                        <td>暂未归还</td>
                    {% elif obj.flag == 1 %}
                        <td style="color: red">超时归还</td>
                    {% else %}
                        <td>按时归还</td>
                    {% endif %}

                    <th>
                        <button id="btn1--{{ obj.id }}" onclick="sendback({{ obj.id }})"
                                class="layui-btn layui-btn-normal">
                            归还书籍
                        </button>
                    </th>
                </tr>
            {% endif %}
        {% endfor %}
    </table>
{% endblock %}

{% block js %}
    <script>
        function sendback(objId) {
            layer.open({
                content: '是否归还此书？'
                , btn: ['确认', '取消']
                , yes: function (index, layero) {
                    $.ajax({
                        url: '{% url 'return_book' %}',
                        type: 'POST',
                        data: {'objId': objId},
                        dataType: 'JSON',
                        success: function (res) {
                            layer.open({
                                content: '成功归还！'
                                , btn: ['确认']
                                , yes: function (index, layero) {
                                    location.href = '{% url 'my_borrow_book' %}'
                                }
                            })
                        }
                    })
                }
            })
        }
    </script>
{% endblock %}